<template>
  <div>
    <div class="index_background">
      <el-form label-width="70px" class="login">
        <h2>平台登录</h2>
        <el-form-item label="用户名" prop="pass">
          <el-input
            id="username"
            placeholder="请输入用户名"
            v-model="loginForm.username"
            name="username"
            auto-complete="on"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            id="password"
            placeholder="请输入密码"
            v-model="loginForm.password"
            show-password
          ></el-input>
        </el-form-item>
        <el-button type="primary" v-on:click="login()">登录</el-button>
        <el-button type="primary" @click="regFormlog = true">注册</el-button>
      </el-form>
    </div>
    <div>
      <el-dialog title="账号注册" :visible.sync="regFormlog">
        <el-form :model="regForm">
          <el-form-item label="账号">
            <el-input
              v-model="regForm.username"
              autocomplete="off"
              placeholder="请输入账号"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input
              v-model="regForm.password"
              autocomplete="off"
              placeholder="请输入密码"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input
              v-model="regForm.email"
              autocomplete="off"
              placeholder="请输入邮箱，如：123@qq.com"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="regFormlog = false">取 消</el-button>
          <el-button type="primary" @click="register()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import logins from "@/api/interface";

export default {
  name: "Login",
  data() {
    return {
      regFormlog: false,
      loginForm: {
        username: "",
        password: "",
      },
      regForm: {
        username: "",
        password: "",
        email: "",
      },
      responseResult: [],
    };
  },
  methods: {
    login() {
      logins.login(this.loginForm);
    },
    register() {
      this.$axios.post("/regist/", this.regForm).then((res) => {
        if ((res.status == 200) & (res.data.code == 1)) {
          this.$message({
            message: "注册成功",
            type: "success",
          });
          this.regFormlog = false;
        } else {
          this.$message({
            message: res.data.msg,
            type: "error",
          });
          this.regFormlog = false;
        }
      });
    },
  },
};
</script>

<style scoped>
.index_background {
  background: url("~@/../static/登录2.png");
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0px;
  top: 0px;
}
.login {
  border-radius: 25px;
  background-clip: padding-box;
  margin: 155px auto;
  width: 350px;
  padding: 35px 55px;
  background: rgba(7, 62, 129, 0.315);
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #c6c6c6;
  text-align: center;
}
</style>